<template>
  <!-- element-plus中的容器 -->
  <el-container class="layout-container">
    <!-- 左侧菜单 -->
    <el-aside width="200px">
      <div class="el-aside__logo"></div>
      <!-- element-plus的菜单标签 -->
      <el-menu active-text-color="#ffd04b" background-color="#232323"  text-color="#fff"
               router>
        <el-menu-item index="/admin/products">
          <el-icon>
            <Management />
          </el-icon>
          <span>管理商品</span>
        </el-menu-item>
        <el-menu-item index="/admin/users">
          <el-icon>
            <Promotion />
          </el-icon>
          <span>管理用户</span>
        </el-menu-item>
        <el-menu-item index="/admin/orders">
          <template #title>
            <el-icon>
              <UserFilled />
            </el-icon>
            <span>管理订单</span>
          </template>
        </el-menu-item>

        <el-menu-item index="/admin/profile">
          <el-icon>
            <User />
          </el-icon>
          <span>个人中心</span>
        </el-menu-item>

      </el-menu>

      <el-link class="logout" @click="Logout()">
        <el-icon>
          <Back/>
        </el-icon>
        退出登录
      </el-link>

    </el-aside>

    <!-- 右侧主区域 -->
    <el-container>
      <!-- 头部区域 -->

      <el-main>

        <router-view></router-view>


      </el-main>
      <!-- 底部区域 -->
      <el-footer>电子商城 ©2025 Created by kfeimeo</el-footer>
    </el-container>
  </el-container>
</template>




<script lang="ts">


import { defineComponent } from "vue";
import {
  User, Management, Promotion, UserFilled, Crop, EditPen, SwitchButton, CaretBottom, Back
} from '@element-plus/icons-vue'
import router from "../router";
export default defineComponent({
  name: "HomePage",
  computed: {
    SwitchButton() {
      return SwitchButton
    },
    EditPen() {
      return EditPen
    },
    Crop() {
      return Crop
    },
    User() {
      return User
    },

  },
  components: {Back, CaretBottom, User, UserFilled, Promotion, Management},
  setup() {
    const username = sessionStorage.getItem('username') || '默认用户名';
    const Logout = () => {
      sessionStorage.setItem('isLoggedIn','false');
      sessionStorage.setItem('username','');
      sessionStorage.setItem('userId','');
      router.push({ path: "/login" });
      return;
    };
    return {
      username,
      Logout
    };
  },
})

</script>
<style>
.logout{
  color: #a30000;
  display: block;
  margin-top: 20px;
  margin-left: 20px;
  justify-content: center;
  background-color: #000000;
}
.logout:hover{
  color: #fd3d3d;
}
</style>